<template>
  <div id="questionView">
    <a-space direction="vertical" :size="16" style="display: block">
      <a-row>
        <a-col :span="12">
          <a-tabs type="rounded" default-active-key="question">
            <a-tab-pane key="question" title="题目">
              <a-card
                :title="question?.title"
                :bordered="false"
                :style="{ width: '100%' }"
              >
                <template #extra>
                  <a-tag
                    v-for="(tag, index) of question?.tags"
                    :key="index"
                    color="green"
                    >{{ tag }}
                  </a-tag>
                </template>
                <a-space direction="vertical" size="large">
                  <a-descriptions title="判题配置" align="right">
                    <a-descriptions-item label="时间限制">
                      {{ question?.judgeConfig?.timeLimit }} ms
                    </a-descriptions-item>

                    <a-descriptions-item label="堆栈限制">
                      {{ question?.judgeConfig?.stackLimit }} M
                    </a-descriptions-item>

                    <a-descriptions-item label="内存限制">
                      {{ question?.judgeConfig?.memoryLimit }} M
                    </a-descriptions-item>
                  </a-descriptions>
                </a-space>
                <MdViewer :value="question?.content as any"></MdViewer>
              </a-card>
            </a-tab-pane>
            <a-tab-pane key="comment" title="评论"> 评论功能</a-tab-pane>
            <a-tab-pane key="answer" title="答案">
              {{ question?.answer }}
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :span="12">
          请选择编程语言：
          <a-select
            v-model="questionSubmit.language"
            :style="{ width: '120px' }"
            placeholder="请选择编程语言"
          >
            <a-option>java</a-option>
            <a-option>cpp</a-option>
            <a-option>go</a-option>
            <a-option>html</a-option>
          </a-select>
          <CodeEditor
            style="margin-top: 20px"
            :value="questionSubmit.code"
            :handle-change="changeCode"
            :language="questionSubmit.language"
          />
          <a-button
            style="margin-top: 20px; width: 150px"
            type="primary"
            @click="submitQuestion"
            >提交代码
          </a-button>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import CodeEditor from "@/components/CodeEditor.vue";
import {
  QuestionControllerService,
  QuestionSubmitControllerService,
  QuestionVO,
} from "../../../generated";
import { Message } from "@arco-design/web-vue";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import MdViewer from "@/components/MdViewer.vue";

let question = ref<QuestionVO>();

const route = useRoute();

const id = route.params.id;

const changeCode = (v: string) => {
  questionSubmit.value = {
    ...questionSubmit.value,
    code: v,
  };
};

const submitQuestion = async () => {
  // console.log("questionSubmit", questionSubmit.value);
  const res = await QuestionSubmitControllerService.doQuestionSubmitUsingPost(
    questionSubmit.value as any
  );
  if (res.code === 0) {
    Message.success("提交成功");
  } else {
    Message.error("提交失败：" + res.message);
  }
};

const questionSubmit = ref({
  language: "java",
  code: "",
  questionId: id,
});

const getData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    id as any
  );
  if (res.code === 0) {
    question.value = res.data;
  } else {
    Message.error("加载失败，" + res.message);
  }
};

onMounted(async () => {
  getData();
});
</script>

<style scoped>
#questionView {
  padding: 20px;
}
</style>
